<template>
  <Drawer
    width="33%"
    :title="title"
    placement="right"
    v-model:visible="visible"
    :footer-style="{ textAlign: 'right' }"
    @close="close"
  >
    <template #closeIcon>
      <ArrowLeftOutlined />
    </template>

    <Form :model="formState" v-bind="formItemLayout" ref="formRef">
      <FormItem
        label="用户组名"
        name="name"
        :rules="[{ required: true, message: title == '编辑用户组' ? '请输入用户组名' : '请选择用户组' }]"
      >
        <Input v-if="title == '编辑用户组'" v-model:value="formState.name"></Input>
        <template v-if="title == '查看详情'">{{ formState.name }}</template>
      </FormItem>
      <FormItem label="排班状态">
        {{ formState.isScheduled }}
      </FormItem>
      <FormItem label="授权ID">
        {{ formState.policyId }}
      </FormItem>
      <FormItem label="授权策略">
        {{ formState.policyName }}
      </FormItem>
      <FormItem label="创建时间">
        {{ formState.createdTime }}
      </FormItem>
      <FormItem label="最后更新时间">
        {{ formState.lastUpdateTime }}
      </FormItem>
      <FormItem label="描述">
        <Textarea v-if="title == '编辑用户组'" v-model:value="formState.description"></Textarea>
        <template v-if="title == '查看详情'">{{ formState.description }}</template>
      </FormItem>
    </Form>
    <template v-if="title == '编辑用户组'" #footer>
      <Button style="margin-right: 8px" type="primary" @click="submit">提交</Button>
      <Button @click="close">取消</Button>
    </template>
  </Drawer>
</template>
<script lang="ts" setup>
import { Drawer, Form, FormItem, Input, message, Button, Textarea } from 'ant-design-vue';
import { reactive, ref } from 'vue';
import { ArrowLeftOutlined } from '@ant-design/icons-vue';
import { UserGroupTableRecord } from '/@/api/work-order/userManagement/userGroup/model/userGroupModel';
import { editUserGroup, getDetail } from '/@/api/work-order/userManagement/userGroup/userGroup';
const visible = ref(false);
const title = ref('编辑用户组');
let formState = reactive({} as UserGroupTableRecord);
const formRef = ref();

const getDetailData = async (id) => {
  formState = await getDetail(id);
};

const openEdit = (record) => {
  title.value = '编辑用户组';
  getDetailData({ groupId: record.id });
  visible.value = true;
};

const openDetail = async (record) => {
  title.value = '查看详情';
  getDetailData({ groupId: record.id });
  visible.value = true;
};
const emit = defineEmits(['submitSuccess']);
const submit = async () => {
  let param = {
    description: formState.description,
    id: formState.id,
    name: formState.name,
  };
  formRef.value.validate().then(async () => {
    let res = await editUserGroup(param);
    if (res) {
      message.success('编辑成功');
    }
    emit('submitSuccess');
  });
};
const close = () => {
  visible.value = false;
  formRef.value.clearValidate();
  formState = {} as UserGroupTableRecord;
};
const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 14 },
};
defineExpose({ openEdit, openDetail });
</script>
